<template>
  <div class="app-container">
    <div class="bg">
      <el-divider content-position="left">模版信息</el-divider>
      <el-form ref="ruleForm" :model="tampMsg" label-width="100px" class="demo-ruleForm">
        <el-form-item label="任务类型">{{ tampMsg.taskTypeName }}</el-form-item>
        <el-form-item label="模版名称">{{ tampMsg.taskModelName }}</el-form-item>
        <el-form-item label="排序">{{ tampMsg.sort }}</el-form-item>
        <el-form-item label="对应工种">
          <el-table :data="tampMsg.craftList" stripe size="mini" style="width: 100%">
            <el-table-column prop="craftName" label="工种" />
            <el-table-column prop="name" label="预设工种单价（元）" />
          </el-table>
        </el-form-item>
      </el-form>
      <br>
      <el-divider content-position="left">任务信息</el-divider>
      <el-table :data="tableData" stripe size="mini" style="width: 100%">
        <el-table-column prop="title" label="内容标题" />
        <el-table-column prop="dataType" label="内容类型" />
        <el-table-column prop="isMust" label="是否必填">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isMust" :active-value="1" :inactive-value="0" @change="changeclick(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="itemSort" label="排序" />
        <el-table-column prop="isEnable" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" @change="changeclick(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { viewTaskModelById } from '@/api/task/taskModel'
import { getCustomerItemsList, modifyCustomerItems } from '@/api/product-ts/customer/items'
export default {
  data() {
    return {
      tampMsg: {
        craftList: []
      },
      tableData: []
    }
  },
  mounted() {
    const taskModelId = this.$route.query.id
    viewTaskModelById({ taskModelId }).then(res => {
      this.tampMsg = res.data
    })
    getCustomerItemsList({ taskModelId }).then(res => {
      this.tableData = res.data
    })
  },
  methods: {
    changeclick(row) {
      modifyCustomerItems({ ...row }).then(res => {
        this.$message.success(res.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bg {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}
</style>

